import React, { Component } from 'react';
import { Button } from 'antd';

// 案例调用
import AddEditableTabel from './AddEditableTabel';


class StoresMaintenance extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [
        {
          key: '0',
          name: 'Edward King 0',
          age: '32',
          address: 'London, Park Lane no. 0',
          color: '#eee'
        },
        {
          key: '1',
          name: 'Edward King 1',
          age: '32',
          address: 'London, Park Lane no. 1',
          color: '#ddd'
        },
      ],
      count: 2,
    }

    // 定义表头数据，以及表格宽度等（所有API参数见table内的Column介绍）
    this.columns = [
      {
        title: 'name',
        dataIndex: 'name',
        width: 100, // 设置表格宽度
        editable: true,
      },
      {
        title: 'age',
        width: 150,
        dataIndex: 'age',
        editable: true,
      },
      {
        title: 'address',
        dataIndex: 'address',
        editable: true,
      },
      {
        title: 'operation',
        dataIndex: 'operation',
        width: 180,
        // 用于生成自定义内容区域，最右侧 删除按钮等（当前行值，当前数据，行索引）
        render: (_text, record) => (
          <div>
            {
              this.state.dataSource.length >= 1 ? (
                <span onClick={() => this.handleDelete(record.key)}>删除</span>
              ) : null
            }
            <span>其它</span>
          </div>
        )
      },
    ];

    this.rowSelection = {
      type: 'checkbox', // 单选或多选

      // hideDefaultSelections: 'true', // 去掉全选和反选两个默认选项

      // 选择框的默认属性配置
      getCheckboxProps: record => ({
        // 禁止掉的就是Disabled User这一项，也就是不能点,在此提前过滤
        disabled: record.name === 'Disabled User',
      }),

      // 每次点击选中的数据
      onChange: (selectedRowKeys, selectedRows) => {
        // console.log('selectedRowKeys',selectedRowKeys); // 得到每一项下标的信息[1],是一个数组，选一项数组中就有一项，选多项就有多项。
        // 如果选中一项就是[{}],选中多项就是[{},{},{}]
        // console.log('selectedRows',selectedRows);// 得到每一项的信息，也就是每一项的信息[{key: 1, name: "花骨朵", age: 18, hobby: "看书"}]
      },

      // onSelect 用户手动选择／取消选择 某列的回调。
      onSelect: (record, selected, selectedRows) => {
        console.log('record',record); // 选中的每行，是一个对象
        console.log('seleted',selected); // true或者false
        console.log('selectedRows',selectedRows); // 选中的每行信息，是一个数组
      },

      // 是否全选或全取消 的回调
      onSelectAll: (selected, selectedRows, changeRows) => {
        console.log('是否全选');
        console.log('selected',selected); // 是否选中
        console.log('selectedRows',selectedRows); // 选中的每一项
        console.log('changeRows',changeRows);   // 变化的每一项
      },

      // 用户手动选择反选的回调
      onSelectInvert: (selectedRows) => {
        console.log('selectedRows', selectedRows);
      },
    }
  }

  // 组件将要挂载之前触发
  componentWillMount () { }

  // 组件渲染完成真实DOM之后触发
  componentDidMount () { }

  // 右侧删除按钮测试事件
  handleDelete = (key) => {
    const dataSource = [...this.state.dataSource];
    this.setState({
      dataSource: dataSource.filter(item => {
        return item.key !== key
      })
    });
  };

  // 添加一行事件（新增）
  handleAdd = () => {
    const { count, dataSource } = this.state;
    const newData = {
      key: count,
      name: `Edward King ${count}`,
      age: 32,
      address: `London, Park Lane no. ${count}`,
    };
    this.setState({
      dataSource: [...dataSource, newData],
      count: count + 1,
    });
  };

  // 保存事件
  handleSaveTable = row => {
    const newData = [...this.state.dataSource];
    const index = newData.findIndex(item => row.key === item.key);
    const item = newData[index];
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
    console.log('保存', newData)
    this.setState({ dataSource: newData });
  };

  render () {
    return (
      <div>
        <Button onClick={this.handleAdd} type="primary" style={{ marginBottom: 16 }}>
          新增
        </Button>
        <AddEditableTabel
          dataSource={this.state.dataSource} // 表数据
          columns={this.columns} // 表头
          // 指定变量内。可以传入所有tabel参数
          optsTable={{
            rowSelection: this.rowSelection // 单选多选参数
          }}
          handleSaveTable={this.handleSaveTable} // 处理编辑状态的数据(row)，自定义处理
        />
      </div>
    );
  }
}
// 导出组件，并且载入store内数据
export default StoresMaintenance;
